<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@include file="../WEB-INF/jspf/controlesessao.jspf"%>

<c:set var="id_cidade" value="${param.id_cidade}"/>
<c:if test="${empty param.id_cidade}">
    <c:set var="id_cidade" value="0"/>
</c:if>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <link rel='stylesheet' type='text/css' href='../css/fullcalendar.css' />
        <link rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.2.custom.css">
        <script type='text/javascript' src='../js/jquery.js'></script>
        <script type='text/javascript' src='../js/jquery-ui-1.8.2.custom.min.js'></script>
        <script type='text/javascript' src='../js/fullcalendar.js'></script>
        <style type='text/css'>

        body {
            margin-top: 40px;
            text-align: center;
            font-size: 14px;
            font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }

        #loading {
            position: absolute;
            top: 5px;
            right: 5px;
        }
        #novo a{
            position: absolute;
            top: 5px;
            right: 330px;
            background-color:green;
            color:white;
        }
        #calendar {
            width: 900px;
            margin: 0 auto;
        }

        </style>
    </head>
    <body>
        <form method="post" name="form">
            <p><label class="lbInput">Cidade</label>
                <sql:query var="queryCidade" dataSource="jdbc/dbo_MicrosoftSQLServer">
                    SELECT  * FROM Cidades
                    order by nome_cidade
                </sql:query>
                <select id="id_cidade" name="id_cidade" class="required" onchange="submit()">
                    <option value="0">Todas</option>
                    <c:forEach var="cidade" items="${queryCidade.rows}">
                        <c:set var="selected" value=""/>
                        <c:if test="${param.id_cidade==cidade.id_cidade}">
                            <c:set var="selected" value="selected"/>
                        </c:if>
                        <option value="${cidade.id_cidade}" <c:out value="${selected}"/>>${cidade.nome_cidade}</option>
                    </c:forEach>
                </select>
            </p>
            <p>
                <label>Data</label>
                <input id="data_inicio" name="data_inicio" type="text" value="${param.data_inicio}" size="10"/> a
                <input id="pesquisa" name="pesquisa" type="button" value="Pesquisar"/>
            </p>
        <input type="hidden" id="token" name="token" value="${sessionScope.token}" /> </form>
        <div id='loading' style='display:none'>loading...</div>
        <div id='calendar'></div>
        <div id="evento" title="Evento" style="display:none">
            <iframe id="frame" src="" width="639px" height="440px" frameborder="0">

            </iframe>
        </div>
    </body>
            <script type='text/javascript'>

            $(document).ready(function() {

               var calendario= $('#calendar').fullCalendar({
                    header: {
                        left: 'title',
                        right: 'prev,next today'
                    },
                    theme:true,
                    height:500,
                    selectable: true,
                    selectHelper: true,
                    editable: true,
                     select: function(start, end, allDay) {
                        var d = start.getDate();
                        var m = start.getMonth()+1;
                        var y = start.getFullYear();
                        var data = 'data='+d+'/'+m+'/'+y;
                        var url = 'fm_new_Calendarios.jsp?token=${sessionScope.token}&'+data+'&id_cidade='+$("#id_cidade").val();
                        $("#frame").attr("src",url);
                        $("#evento").dialog("open");
                    },

                    events:"fm_getEventos.jsp?token=${sessionScope.token}&id_cidade=${id_cidade}"
                            ,
                            eventDrop: function(event, delta) {
                                alert(event.title + ' movido ' + delta + ' dias\n' );
                            },
                            eventClick: function(event) {
                                $("#frame").attr("src",event.url);
                                $("#evento").dialog("open");
                                return false;
                            },
                            loading: function(bool) {
                                if (bool) $('#loading').show();
                                else $('#loading').hide();
                            }
                        });
                    
                $("#evento").dialog({
                    autoOpen:false,
                    resizable: true,
                    height: 540,
                    width:690,
                    modal: true,
                    buttons: {
                        Fechar: function() {
                            $(this).dialog('close');
                        }
                    }
                });
                $("#novo_evento").click(function(){
                    $("#frame").attr("src",'fm_new_Calendarios.jsp');
                    $("#evento").dialog("open");
                });

                $("#pesquisa").click(function(){
                    var data =  $("#data_inicio").val() ;
                    var ano = data.substring(6,10) ;
                    var dia = data.substring(0,2) ;
                    var mes = data.substring(3,5)-1 ;
                    
                    calendario.fullCalendar( 'gotoDate',  ano,mes,dia);
                    
                });
            });

        </script>
</html>
